<template>
  <div class="container">
    <!-- title -->
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      @click-right="save"
      title="编辑资料"
      right-text="保存"
    />
    <!-- 用户资料 -->
    <van-cell-group>
      <van-cell
        is-link
        title="头像"
        @click="openTx"
        center
      >
        <!-- 插槽控制右边内容显示 -->
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="photo"
        />
      </van-cell>
      <van-cell
        is-link
        title="名称"
        @click="showName=true"
        :value="user.name"
      />
      <van-cell
        is-link
        title="性别"
        @click="showGender=true"
        :value="user.gender===0?'男':'女'"
      />
      <van-cell
        is-link
        title="生日"
        @click="openDate()"
        :value="user.birthday"
      />
    </van-cell-group>
    <!-- 资料修改=》都是弹出层 -->
    <!-- 修改头像弹出 -->
    <van-popup
      v-model="showPhoto"
      position="bottom"
    >
      <input
        type="file"
        @change="preview"
        ref="fileInput"
        style="display:none"
      >
      <van-cell
        value="本地相册选择"
        @click="$refs.fileInput.click()"
        is-link
      />
      <van-cell
        value="拍照"
        @click="$refs.fileInput.click()"
        is-link
      />
    </van-popup>
    <!-- 修改登录人名称弹出 -->
    <van-popup
      v-model="showName"
      position="bottom"
    >
      <van-field
        v-model="user.name"
        required
        placeholder="请输入用户名"
      />
    </van-popup>
    <!-- 修改性别 -->
    <van-popup
      v-model="showGender"
      position="bottom"
    >
      <van-cell
        value="男"
        @click="changeGender(0)"
        is-link
      />
      <van-cell
        value="女"
        @click="changeGender(1)"
        is-link
      />
    </van-popup>
    <!-- 修改生日 -->
    <van-popup
      v-model="showBirthday"
      position="bottom"
    >
      <van-datetime-picker
        title="选择生日"
        v-model="nowDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showBirthday=false"
        @confirm="confirmDate"
      />
    </van-popup>
  </div>
</template>

<script>
// 导入dayjs
import dayjs from 'dayjs'
// 导入获取用户完整资料数据接口
import { getUserProfile, updateUserPhoto, updateUserInfo } from '@/api/user'
import { mapMutations } from 'vuex'
export default {
  name: 'user-profile',
  data () {
    return {
      // 修改资料弹窗控制
      showPhoto: false,
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前选中日期
      nowDate: new Date(),
      // 最小可选日期
      minDate: new Date('1950-01-01'),
      // 日期控件 最大可选日期
      maxDate: new Date(),
      // 默认用户信息
      // 头像信息=》头像上传，单独接口处理
      photo: 'https://img.yzcdn.cn/vant/cat.jpeg',
      // 资料修改=》单独接口处理
      user: {
        name: '默认信息',
        gender: 0,
        birthday: '2019-10-10'
      }
    }
  },
  created () {
    this.getUser()
  },
  mounted () {
    console.log(this.$refs.fileInput)
  },
  methods: {
    ...mapMutations(['setPhoto']),
    openTx () {
      // 打开弹出层
      this.showPhoto = true
      // 能获取到input元素的dom对象吗？=》不能拿到
      this.$nextTick(() => {
        console.log('获取异步渲染后的dom：', this.$refs.fileInput)
      })
    },
    // 选择图片预览=》在手机上可以出发选择手机相册或调用摄像头拍照
    preview () {
      // 获取选择的本地图片=>file对象
      // console.log(this.$refs.fileInput.files[0])
      const file = this.$refs.fileInput.files[0]
      /**
       * 转换file对象=》支持渲染
       * 1. 使用FileReader对象=》new FileReader()
       * 2. 调用实例方法转换file对=》base64格式
       */
      const fr = new FileReader()
      // 异步执行=>需要通过onload回调函数获取转换的结果
      fr.readAsDataURL(file)
      fr.onload = () => {
        // 显示转换的图片
        this.photo = fr.result
        // 关闭弹出
        this.showPhoto = false
      }
    },
    // 获取待编辑用户资料
    async getUser () {
      const { data } = await getUserProfile()
      console.log(data)
      // 用户资料
      this.user = data
      // 用户头像
      this.photo = data.photo
    },
    // 保存资料的方法
    async save () {
      try {
        /**
         * 1. 修改头像 =》 判断是否选过头像=》选过调用上传接口修改
         * 2. 修改资料
         */
        // 上传
        if (this.$refs.fileInput?.files[0]) {
          const { data: { photo } } = await updateUserPhoto(this.$refs.fileInput.files[0])
          this.setPhoto(photo)
        }
        await updateUserInfo(this.user)
        // 返回上次页面=》我的
        this.$router.back()
        this.$toast.success('保存成功')
      } catch (error) {
        console.log(error)
        this.$toast.fail('保存失败')
      }
    },
    // 打开日期选择
    openDate () {
      // 有生日数据
      if (this.user.birthday) {
        // 修改当前选中时间为用户数据的时间
        this.nowDate = new Date(this.user.birthday)
      }
      this.showBirthday = true
    },
    // 确认选择日期
    confirmDate (value) {
      console.log('选择完生日：', value)
      // 确认时间后  把Date转换成String
      this.user.birthday = dayjs(value).format('YYYY-MM-DD')
      this.showBirthday = false
    },
    // 注意：调用接口保存不会入库
    changeGender (gender) {
      // 选择性别 gender 0 男  1 女
      this.user.gender = gender
      this.showGender = false
    }
  }
}
</script>

<style scoped lang='less'></style>
